import React from 'react';

import { navLinks } from '../../constant';
import { useGSAP } from '@gsap/react';
import { gsap } from 'gsap';

const Navbar = () => {
    useGSAP(() => {
        const navTween = gsap.timeline({
            scrollTrigger: {
                trigger: 'nav',
                // 导航栏底部与视窗顶部接触后开始动画
                start: 'bottom top',
                scrub: true
            }
        })

        navTween.fromTo('nav', {
            backgroundColor: 'transparent'
        },{
            backgroundColor: '#00000090',
            backgroundFilter: 'blur(10px)',
            duration: 1,
            ease: 'power1.out'
        })

        gsap.timeline({
            scrollTrigger: {
                trigger: '#hero',
                start: 'top top',
                end: 'bottom top',
                scrub: true
            }
        })
        .to('.left-leaf', {
            y: 200
        }, 0)
        .to('.right-leaf', {
            y: -200
        }, 0)
    })

    return (
    <nav>
        <div>
            <a href="#home" className="flex items-center gap-2">
                <img src="/images/logo.png" alt="" />
                <p>Velvet Pour</p>
            </a>

            <ul>
                { navLinks.map((link)=> {
                    return <li key={ link.id }>
                        <a href={`#${link.id}`}>{link.title}</a>
                    </li>
                }) }
            </ul>
        </div>
    </nav>
  );
};
export default Navbar;